<template>
  <div :class="{
    'bottom-part': true,
    'bottom-part-dark': isDarkTheme,
    'bottom-part-light': !isDarkTheme,
  }">
    <div class="subtitle">
      <span>未处理表单到达时间分布</span>
    </div>
    <div class="chart-box">
      <RoseChart 
        :pageConfig="pageConfig"
        @handleOpenUnDealNum="handleOpenUnDealNum"
      />
    </div>
    
  </div>
</template>

<script>
import CustomTitle from "../components/CustomTitle.vue";
import RoseChart from './RoseChart.vue';

export default {
  props: {
    pageConfig: Object
  },
  components: {
    CustomTitle,
    RoseChart
  },
  data() {
    return {
      title: '处理单量及通过率',
    }
  },

  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  mounted () {
  },
  methods: {
    handleOpenUnDealNum(name) {
      this.$emit('handleOpenUnDealNum', name)
    }
  }

}
</script>

<style lang="scss" scoped>
  .bottom-part {
    height: 35%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    .subtitle {
      height: 30px;
      padding: 0 1vw 0 1.5vw;
      font-size: 18px;
      font-family: "YouSheBiaoTiHei";
      display: flex;
      align-items: center;
    }
    .chart-box {
      height: calc(100% - 30px);
      width: 100%;
    }
  }
  .bottom-part-dark {
    .subtitle {
      color: #FFF;
      text-shadow: 0 0 16px rgba(60, 152, 255, 0.38);
      font-family: "YouSheBiaoTiHei";
      letter-spacing: 0.6px;
      text-transform: uppercase;
      background: url('../css/subTitle-bg-dark.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .bottom-part-light {
    color: #333;
    
  }


  // 2K
@media screen and (max-width: 2560px) {
  .bottom-part {
    .subtitle {
      height: 40px;
      font-size: 20px;
    }
    .chart-box {
      height: calc(100% - 40px);
      width: 100%;
    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .bottom-part {
    .subtitle {
      height: 30px;
      font-size: 16px;
    }
    .chart-box {
      height: calc(100% - 30px);
      width: 100%;
    }

  }
}

</style>